<template>
  <div class="warp">
    <span class="my">我的</span>
    <div class="user">
      <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
    </div>
    <span class="login">点击登录</span>
  </div>
</template>

<script>
export default {
  name: "myTop",
  data() {
    return {};
  },
  props: {},
  created() {},
  methods: {},
};
</script>

<style scoped lang="less">
.warp {
  position: relative;
  width: 375px;
  height: 217px;
  background: #3f51b5;
  span.my {
    color: #ffffff;
    font-size: 16px;
    text-align: left;
    font-weight: bold;
    position: relative;
    left: 19px;
    top: 18px;
  }
  .user {
    width: 67px;
    height: 67px;
    border-radius: 50%;
    background: #eeecec;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 48px;
    left: 50%;
    margin-left: -33.5px;
    bottom: 17px;
    .van-icon {
      display: block;
      font-size: 32px;
    }
  }
  .login {
    color: rgba(255, 255, 255, 100);
    font-size: 14px;
    position: absolute;
    top: 132px;
    left: 50%;
    margin-left: -28px;
  }
}
</style>
